<%--
  Created by IntelliJ IDEA.
  User: 15890741124
  Date: 2022/8/10
  Time: 8:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common.jsp"%>
<html>
<head>
    <title>dept</title>

</head>
<body>
<%--查询--%>
<form class="layui-form" action="" style="margin-top: 20px">
    <div class="layui-inline">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" id="deptName" placeholder="请输入部门名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">添加人</label>
        <div class="layui-input-inline">
            <input type="text" name="createBy" id="createBy" placeholder="请输入添加人" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button class="layui-btn layui-btn-primary" id="reset" type="reset">重置</button>
        </div>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除 </a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
    </div>
</script>

<%-- 添加表单  --%>
<form class="layui-form" action="" id="addForm" style="display: none" >
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" id="user" lay-verify="required" placeholder="请输入部门名称"
                   autocomplete="off" class="layui-input"><span style="color:red;"></span>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">添加人</label>
        <div class="layui-input-block">
            <input type="text" name="createBy" readonly  value="${user.username}" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态:</label>
        <div class="layui-input-block">
            <label for="yong">
                可用
            </label>
            <input type="radio" name="status" id="yong" class="layui-input" value="0" checked/>
            <label for="buyong">
                停用
            </label>
            <input type="radio" name="status" id="buyong" value="1" class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="addSub" lay-submit lay-filter="addUserFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%-- 修改表单 根据姓名修改自己的部门 --%>
<form class="layui-form" action="" lay-filter="updateFromFilter" id="updateForm" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">部门ID</label>
        <div class="layui-input-block">
            <input type="text" name="deptId"  readonly placeholder="请输入部门ID" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" id="updateUser" placeholder="请输入部门名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态:</label>
        <div class="layui-input-block">
            <label for="man">
                可用
            </label>
            <input type="radio" name="status" id="man" class="layui-input" value="0" checked/>
            <label for="woman">
                停用
            </label>
            <input type="radio" name="status" id="woman" value="1" class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">修改人</label>
        <div class="layui-input-block">
            <input type="text" name="updateBy" readonly  value="${user.username}" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateUserFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#demo'
            , height: 550
            , url: '${pageContext.request.contextPath}/dept/queryAll.do'
            , dataType: 'json'
            , page: true //开启分页
            // , autoSort: false//关闭自动排序
            , cols: [[
                {checkbox:'checkbox', fixed: 'left'}
                ,{field: 'deptId', title: '部门编号', width: 80, sort: true, fixed: 'left'}
                , {field: 'deptName', title: '部门名称', width: 120}
                , {field: 'orderNum', title: '显示顺序', width: 200, sort: true, hide: true}
                , {field: 'status', title: '部门状态', width: 80, sort: true
                    ,templet: function (d) {
                        if(d.status==0){
                            return '<span class="layui-btn layui-btn-xs" lay-event="state">可用</span>'
                        }
                        return '<span class="layui-btn layui-btn-xs layui-btn-danger" lay-event="state">禁用</span>'
                    }
                }
                , {field: 'delFlag', title: '删除标志', width: 80, sort: true, hide: true
                    ,templet: function (d) {
                        if(d.status==0){
                            return '<span class="layui-btn layui-btn-xs" lay-event="state">可用</span>'
                        }
                        if(d.delFlag==2){
                            return '<span class="layui-btn layui-btn-xs layui-btn-danger" lay-event="state">删除</span>'
                        }
                    }
                }
                , {field: 'createBy', title: '创建人', width: 80, sort: true}
                , {field: 'createTime', title: '创建时间', width: 300, sort: true}
                , {field: 'updateBy', title: '修改人', width: 200, sort: true}
                , {field: 'updateTime', title: '修改时间', width: 300, sort: true}

                 , {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
            ]]
            , toolbar: "#toolbarDemo"
        });

        table.on('tool(test)', function (obj) {

            var data = obj.data;

            switch (obj.event) {
                case "del":
                    if (obj.event === "del") {
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: "${pageContext.request.contextPath}/dept/delete.do",
                                data: {deptId: obj.data.deptId},
                                //响应的数据类型
                                dataType: "JSON",
                                type: "POST"
                                //异步请求
                                // async: true,
                                //成功的回调
                                , success: function (data) {
                                    if (data.code == 0) {
                                        layer.closeAll();
                                        table.reload('demo');
                                    }
                                    layer.msg(data.msg);
                                }
                            });
                        });
                    }
                    break;
                case "edit":
                    let name = obj.data.deptId;
                    //将选择的部门id填入到表单中
                    form.val("updateFromFilter", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "deptId": name // "name": "value"
                    });

                    layer.open({//弹出修改框
                        title:'修改',
                        type: 1,
                        content: $("#updateForm"),
                        area: ('500px', '600px')
                    });

                    break;
                default:
                    break;
            }
        });

        //提交修改页面
        form.on('submit(updateUserFilter)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/dept/update.do"
                , data: data.field
                , dataType: "json"
                , type: "POST"
                , success: function (data) {
                    if (data.code == 0) {
                        layer.closeAll();
                        table.reload('demo', {
                            page: {
                                curr: 1
                                //重新从第 1 页开始
                            }
                        });
                    }
                    layer.msg(data.msg);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //头部工具栏
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据

            switch (obj.event) {
                case "del":
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //定义一个数组，封装所有的id
                        var ids = [];
                        //循环所有选中的行
                        for (let i = 0; i < data.length; i++) {
                            ids[i] = data[i].deptId;
                        }
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: "${pageContext.request.contextPath}/dept/delete.do",
                                data: {deptId: ids.join(",")},
                                //响应的数据类型
                                dataType: "JSON",
                                type: "POST"
                                //异步请求
                                // async: true,
                                //成功的回调
                                , success: function (data) {
                                    if (data.code == 0) {
                                        layer.closeAll();
                                        table.reload('demo');
                                    }
                                    layer.msg(data.msg);
                                }
                            });

                        });
                    }
                    break;
                    case "add":
                        layer.open({//弹出添加框
                            title:'添加',
                            type: 1,
                            content: $("#addForm"),
                            area: ('500px', '600px')
                        });
                        break;
                default:
                    break;
            }
        });

        //提交添加页面
        form.on('submit(addUserFilter)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/dept/insert.do"
                , data: data.field
                , dataType: "json"
                , type: "POST"
                , success: function (dat) {
                    if (dat.code == 0) {
                        layer.closeAll();
                        table.reload('demo', {
                            page: {
                                curr: 1
                                //重新从第 1 页开始
                            }
                        });
                    }
                    layer.msg(dat.msg);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //查询问题
        form.on('submit(formDemo)', function (data) {
            table.reload('demo', {
                where: {
                    //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    deptName: data.field.deptName //排序字段-->查询姓名
                    , createBy: data.field.createBy//排序方式 --> 查询部门编号
                }
                , page: {
                    curr: 1
                    //重新从第 1 页开始
                },
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //重置查询条件
        $("#reset").click(function () {
            table.reload('demo', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    deptName: "" //第一个查询条件
                    , createBy: ""//第二个查询条件
                },
                page: {
                    curr: 1
                    //重新从第 1 页开始
                },
            });
        });

        //验证部门是否重复
        $("#user").blur(function(){
            var deptName = $("#user").val();
            $.ajax({
                url: "${pageContext.request.contextPath}/dept/queryByName.do"
                , data: {deptName:deptName}
                , dataType: "json"
                , type: "POST"
                , success: function (re) {
                    if (re.code == 0) {
                        $("#user").next().html(re.msg);
                        $('#addSub').removeClass("layui-btn-disabled").attr("disabled", false);
                    } else {
                        $("#user").next().html(re.msg);
                        $('#addSub').addClass("layui-btn-disabled").attr("disabled", true);

                    }
                }
            });
        });

        //修改部门是否重复
        $("#updateUser").blur(function(){
            var deptName = $("#updateUser").val();
            $.ajax({
                url: "${pageContext.request.contextPath}/dept/queryByName.do"
                , data: {deptName:deptName}
                , dataType: "json"
                , type: "POST"
                , success: function (re) {
                    if (re.code == 0) {
                        $("#updateUser").next().html(re.msg);
                        // $('#addSub').removeClass("layui-btn-disabled").attr("disabled", false);
                    } else {
                        $("#updateUser").next().html(re.msg);
                        // $('#addSub').addClass("layui-btn-disabled").attr("disabled", true);
                    }
                }
            });
        });

    })

</script>
</html>
